<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <div v-for="item in bookInfo" :key="item.id">
        <h3 :style="{color:item.color}">{{item.type}}</h3>
        <div v-for="info in item.list" :key="info.id">
            <p>《{{info.bookName}}》-----{{info.author}}</p>
        </div>
        <hr/>
    </div>
</div>
</body>
<script>
	new Vue({
		el: "#root",
        data:{
			bookInfo:[
				{
					id:100,
                    color:"green",
					type:"武侠小说",
					list:[
						{
							id:1,
							bookName:"天龙八部",
							author:"金庸"
						},
						{
							id:2,
							bookName:"圆月弯刀",
							author:"古龙"
						}
					]
				},{
				    id:200,
				    type:"玄幻",
                    color:"skyblue",
                    list:[
						{
							id:12,
                            bookName: "斗破苍穹",
                            author:"天蚕土豆"
                        },{
						    id:13,
                            bookName: "斗罗大陆",
                            author: "唐家三少"
                        }
                    ]
                }
            ]
        }
	})
</script>
</html>